<template>
<div class="search_list" >
    
    <van-tabs  @click-tab="changeId" class="tabs"  line-width="18px" shrink title-inactive-color="#a3a3ac" color="#f06742">
      <van-tab    v-for="(item,index) in tabsList" :name="item.categoryId"  :title="item.categoryName" :key="item.categoryId">
        <div class="hotWordWrapper">
              <div @click="changeKey(item.word)" class="hotWordItem" v-for="(item,index) in hotWordList" :key="item.score">
                <div class="num"  :class="{
                  red:index == 0,
                  yyy:index==1,
                  eee:index==2
                  
                }">
                  {{ index+1 }}
                </div>
                
                  <div class="hotWord_content">
                    <div class="test1 " >{{ item.word }}</div>
      
                    <div class="icon_content">
                      <div class="iconfont icon-xiadie" v-if="item.shift==-1"></div>
                      <van-icon name="minus" color="#dededf" v-if="item.shift==0"/>
                      <div class="iconfont icon-jiantouxiangshang" v-if="item.shift==1"></div>
      
                    </div>
      
                

                </div>
              </div>
          </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted } from 'vue'
import searchApi from '@/apis/search';
import { useRouter } from 'vue-router';
const router=useRouter()
import type { CategoryValueModel,AnyObject,QueryObject } from '@/apis/search';
const tabsList=ref<CategoryValueModel[]>([])
const hotWordList=ref<AnyObject[]>([])
const size=20
const props=defineProps(['historyList'])
const emits=defineEmits<{
  (e:'searchHandler',vla:string):void
  (e:'inputHandler',vla:string):void
}>()
const categoryId=ref(-1)
onMounted(()=>{
  getTabsList()
  getHotWordList(categoryId.value,size)


  
  
})

//获取分类列表
const getTabsList=async ()=>{
  try {
    let result=await searchApi.reqCategoryList()
   
      tabsList.value=result.category
      
   
  } catch (error) {
    console.log(error);
    
  }
}
const changeId=(name:AnyObject)=>{
  categoryId.value=name.name
  // console.log(event);
  // console.log(name);
  
  
  getHotWordList(categoryId.value,size)

}
//获取热词列表
const getHotWordList=async (categoryId:number,size:number)=>{
  try {
    let result=await searchApi.reqHotWordList(categoryId,size)
    hotWordList.value=result.hotWordResultList
  } catch (error) {
    console.log(error);
    
  }
}
const  changeKey=(word:any)=>{
 
emits('searchHandler',word)
emits('inputHandler',word)
 
//  // 判断token是否存在
//  if(localStorage.getItem('xmtoken')){
//    // 跳转 搜索结果列表
//    router.push({
//     name:"Searchdetail",
//       params:{
//         keyWord: item
//       }
//    })

//    }else{

//      // 不存在，跳转登录界面
//      router.push({
//      path:'/login'

//    })
//    }
}
</script>

<style lang="less" scoped>
.search_list{
    
    margin-top: 5px;
    width: 100%;
    font-size: 14px;
   
    
    .tabs{
      width: 100%;
      .hotWordWrapper{
       padding: 0px 15px 0px 27px;
       border-top:2px solid #f2f2f2;
       
       text-align: center;
       display: flex;
       flex-direction: column;
       .hotWordItem{
         height: 45px;
         display: flex;
         font-size: 16px;
         padding-left: 6px;
         line-height: 45px;
         
         .num{
           width: 20px;
           color: #d9bca5;
           font-size: 14px;
           
         }
         .red{
              color: #ff0b0b;
              font-size: 20px;
              font-weight: bold;
             }
             .yyy{
              color:#f86442 ;
              font-size: 20px;
              font-weight: bold;


             }
             .eee{
              color:#f8a642;
              font-size: 20px;
              font-weight: bold;

             }
         
           .hotWord_content{
             margin-left: 10px;
             display: flex;
             justify-content: space-between;
             flex: 2;
             border-bottom: 1px solid #f2f2f2;
            .test1{
              font-size: 16px;
              height: 45px;
              line-height: 45px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
             .icon-xiadie{
               color:#93cc48;
               font-size: 10px;
             }
             .icon-jiantouxiangshang{
               color: #e44a3b;
               font-size: 10px;
             }
           
           

         }
   
       }
      }
    }
    
  }
</style>